<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/sf_style.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/ui-darkness/jquery-ui-1.9.2.custom.min.css" />
<title>Welcome To SF Hygiene :: Product</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script language="JavaScript">

$(document).ready(function(){
	
	$("#Previous").click(function(){
	       
        $("#loadAllProducts_currentPage").val($("#loadAllProducts_currentPage").val()-1);
           
         $("form").submit();
      });
      
       $("#Next").click(function(){
 
        $("#loadAllProducts_currentPage").val(parseInt($("#loadAllProducts_currentPage").val())+1);
           
         $("form").submit();
      });
       
});
</script>
</head>

<body>
<s:form action="loadAllProducts" theme="simple" name="loadAllProducts">
	<s:hidden name="currentPage"></s:hidden>
	<div class="regular_content">
		<div class="header_area">
			<div class="logo_pic"><img src="${pageContext.request.contextPath}/images/logo.png"/></div>
			<div class="header_menu right">
				<ul>
				    <li><a href="${pageContext.request.contextPath}">Home</a></li>
					<li class="active"><a href="${pageContext.request.contextPath}/product/loadAllProducts.action">Goods</a></li>
				    <li><a href="${pageContext.request.contextPath}/contact/loadcontact.action">Contact Us</a></li>
				    <li><a href="${pageContext.request.contextPath}/enterprise/loadIntroduction.action">About Us</a></li>
				</ul>
			</div>
		</div>
		<div class="all_products_cont">
			<div class="left sec_menu">
				<div class="sec_menu_bg_top"></div>
				<div class="sec_menu_bg_middle">
					<ul>
					    <li class="sec_menu_item"><a href="#"><label>All</label><span></span></a></li>
					    <s:iterator value="types" var="type">
					       <li class="first_menu_item" id="<s:property value='%{#type.id}'/>">
					         <a href="${pageContext.request.contextPath}/product/loadProductsByType.action?producttypeId=<s:property value='%{#type.id}'/>"><label><s:property value="%{#type.name}"/></label><span></span></a>
					       </li>
					    </s:iterator>
					</ul>
				</div>
				<div class="sec_menu_bg_bottom"></div>
			</div>
			<div class="left products_list_area">
				<div class="sf_sitemap">
					<span class="sitemap_desc">Current Location：</span>
					<span>Goods</span>
					<span>&gt;&gt;</span>
					<span>All</span>
				</div>
				<ul>
					<s:set name="num" value="0"></s:set>
					<s:iterator value="products" var="product">
						<s:set name="it" value="%{#num%4}"></s:set>
						<s:if test="%{#it==0}">
						<li class="scoll_list">
							<ul>
						</s:if>
					  			<li class="click_floatbox" id="<s:property value='%{#product.id}'/>">
									<div class="prod_logo">
										<a href="#"><img src="${pageContext.request.contextPath}/<s:property value='%{#product.logo.path}'/>"/></a>
									</div>
									<div class="prod_desc">
										<h4><s:property value="%{#product.name}"/></h4>
										<div class="parameter">
											<h6>Material</h6>
											<p><s:property value="%{#product.material}"/></p>
										</div>
									</div>
								</li>
								<div class="dialog-box" id="dialog-box<s:property value='%{#product.id}'/>" title="Details"></div>
								<script type="text/javascript">
									$(function(){
										$("#<s:property value='%{#product.id}'/>").click(function () {
									    	$( "#dialog-box<s:property value='%{#product.id}'/>" ).dialog( "open" );
									    	$( "#dialog-box<s:property value='%{#product.id}'/>" ).load("${pageContext.request.contextPath}/product/showProduct.action?productId="+$(this).attr('id'));
										});
										$( "#dialog-box<s:property value='%{#product.id}'/>" ).dialog({
											autoOpen: false,
											height: 400,
											width: 800,
											modal: true
										});
									});
								</script>
						<s:if test="%{(#num+1)%4==0}">
								<div class="clear"></div>
							</ul>
						</li>	
			  			</s:if>		
						<s:set name="num" value="%{#num+1}"/>
					</s:iterator>
					<div class="clear"></div>
				</ul>
				<div class="pager">
					<span class="page-navi-count"> <a href="#" id="Previous">&lt;&lt;Previous</a>
						<s:set var="currentPage" value="0" /> <s:iterator
							value="%{pager.pageNums}">
							<a
								href="<s:url value='loadAllProducts.action'><s:param name='currentPage' value='%{#currentPage}'/></s:url>"
								id="pager"> <s:property value="%{pager.pageNums[#currentPage]}" />
							</a>
							<s:set var="currentPage" value="%{#currentPage+1}" />
						</s:iterator> <a href="#" id="Next">Next&gt;&gt;</a>
					</span>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="footer">
			<div class="right copyright">
				&copy;&nbsp;CreateIdea. All Reserved.
			</div>
			<div class="clear"></div>
		</div>
	</div>
	</s:form>
</body>